<script setup lang="ts">
import { collectionFn, comdataFn, deletcommunityFn, modcommunityFn } from '@/api/communityApi';
import { collectionStore } from '@/stores/col';
import { modStore } from '@/stores/modcom';
import { showToast } from 'vant';

import { ref, type Ref } from 'vue';
import { useRouter } from 'vue-router';

interface iComlist {
    flog: boolean
    id: string,
    time: string,
    title: string,
    img1: string,
    img2: string,
    img3: string,
    share: number,
    chat: number,
    photo: string,
    starflog: boolean,
}

const comlist: Ref<iComlist[]> = ref([])

comdataFn().then(res => {
    // console.log(res.data.data);
    comlist.value = res.data.data
})


const fieldtext: Ref<string> = ref('')
const router = useRouter()
function addClick() {
    router.push('/community/addcommunity')
}


const showShare: Ref<boolean> = ref(false)
const options = [
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
];
const onSelect = (option: any) => {
    showToast(option.name);
    showShare.value = false;
};



// const showPopover: Ref<boolean> = ref(false);

const actions = [
    { text: '编辑' },
    { text: '删除' },
];

const count: Ref<number> = ref(0)
function popoClick(itme: any, index: number) {
    count.value = index
}

const mod = modStore()

async function oneditSelect(action: { text: string }, indexdit: number) {

    showToast(action.text);

    if (indexdit == 0) {

        await modcommunityFn(count.value).then(res => {

            console.log('发送修改请求', res);

            mod.changModStore({
                index: count.value,
                modflog: true,
                title: res.data.data.title,
                imageList: [
                    {
                        content: res.data.data.img1
                    },
                    {
                        content: res.data.data.img2
                    },
                    {
                        content: res.data.data.img3
                    }
                ],
                chat: res.data.data.chat,
                share: res.data.data.share
            })
        }).catch(err => {
            console.error('请求失败');

        }).finally(() => {
            console.log('11111');

        })

        console.log('存储 modstore----跳转', mod);
        router.push('/community/addcommunity')


    } else {
        // console.log(11111);
        deletcommunityFn(count.value).then(res => {
            // console.log(res);
            comdataFn().then(res => {
                console.log(res.data.data);
                comlist.value = res.data.data
            })
        })
    }

}


// 收藏
const starflog: Ref<boolean> = ref(false)
const colstore = collectionStore()

async function collectionClick(item: any, index: number) {

    starflog.value = !item.starflog
    console.log(1);
    await collectionFn({ index, starflog }).then(res => {

        console.log('colres', res);
        colstore.changecollfn(res.data.data)


        console.log(2);
        comdataFn().then(res => {
            console.log(3);
            comlist.value = res.data.data
        })



    })




}

</script>




<template>
    <div class="container">
        <header>
            <h1>社区</h1>
            <van-icon class="icon" name="add-o" size="0.25rem" color="#1b1b1b" @click="addClick" />
        </header>
        <main>
            <div class="card" v-for="(item, index) in comlist" :key="index">
                <div class="card-header">
                    <div class="card-header-left">
                        <div class="header-left-image">
                            <van-image round width="0.3rem" height="0.3rem" fit="cover" :src="item.photo" />
                        </div>
                        <div class="header-left-text">
                            <h3>{{ item.id }}</h3>
                            <p>{{ item.time }}</p>
                        </div>
                    </div>
                    <div class="header-right-text">
                        <van-popover theme="dark" placement="left" :show-arrow="false" actions-direction="horizontal"
                            v-model:show="item.flog" :actions="actions" @select="oneditSelect"
                            @open="popoClick(item, index)">
                            <template #reference>
                                <p>...</p>
                            </template>
                        </van-popover>

                    </div>
                </div>
                <p style="font-size: 0.15rem;font-weight: 700;">
                    {{ item.title }}
                </p>
                <div class="content">
                    <div class="content-left">
                        <van-image height="100%" fit="cover" :src="item.img1" />
                    </div>
                    <div class="content-right">
                        <van-image width="100%" fit="cover" :src="item.img2" />
                        <van-image width="100%" fit="cover" :src="item.img3" />
                    </div>
                </div>
                <div style="margin: 10px 0px;">
                    <van-icon @click="showShare = true" name="share-o">{{ item.share
                        }}</van-icon>
                    <van-icon style="margin: 0px 15px;" name="chat-o">{{ item.chat }}</van-icon>
                    <van-icon @click="collectionClick(item, index)"
                        :name="item.starflog ? 'star' : 'star-o'"></van-icon>
                </div>
                <van-cell-group class="input" inset>
                    <van-field v-model="fieldtext" placeholder="来都来了，说点什么呗~" />
                </van-cell-group>
                <div>
                </div>
            </div>


        </main>
    </div>

    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

</template>

<style lang="scss" scoped>
.container {
    padding: 5%;
    padding-top: 10%;
    height: calc(100% - 0.7rem);
    display: flex;
    flex-direction: column;

    header {
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    main {
        flex: 1;
        overflow: auto;
    }
}

.card {
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 3px 6px 12px 1px rgba(0, 0, 255, .1);
}

.card-header {

    display: flex;
    justify-content: space-between;
    align-items: center;

    .card-header-left {
        display: flex;
        align-items: center;

        .header-left-image {
            margin-right: 10px;

        }

        .header-left-text {
            p {
                margin: 0;
            }
        }
    }

    .header-right-text {
        p {
            font-size: 0.20rem;
        }
    }
}

h1 {
    margin: 0;
    font-size: 0.35rem;
}


.content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .content-left {
        width: 49%;
        height: 200px;

    }

    .content-right {
        width: 49%;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .van-image {
            height: 49%;
        }
    }
}

.input {
    margin: 0;
}

.van-cell {
    width: 100%;
    background: #eff7fc;

}
</style>